

<link href="/AceUI/css/select2.css" rel="stylesheet" />
<script src="/AceUI/js/select2.min.js"></script>

<style type="text/css">
    .flowstep li {
        width: 210px;
        list-style: none;
    }

    .flowstep ol {
        list-style: none;
    }

    .flowstep .detail-stepbar .step-name {
        padding: 3px 0;
        font-weight: 700;
        color: #888;
    }

    .flowstep .detail-stepbar .step-no {
        height: 34px;
        line-height: 34px;
        font-family: 'arial black';
        color: #fff;
        font-size: 18px;
    }

    .flowstep .detail-stepbar .step-no, .flowstep .detail-stepbar .step-sub-box .step-sub {
        background: url(/AceUI/images/flowstep.png) 50% -102px no-repeat;
    }

    .flowstep .detail-stepbar .step-done .step-no {
        background-position: 50% -170px;
    }

    .flowstep .detail-stepbar .step-first .step-done .step-no {
        background-position: 50% -204px;
    }

    .flowstep .detail-stepbar .step-last .step-cur .step-no {
        background-position: 50% -380px;
    }

    .flowstep .detail-stepbar .step-cur .step-no {
        background-position: 50% -346px;
    }

    .flowstep .detail-stepbar .step-last .step-no {
        background-position: 50% -136px;
    }

    .flowstep .detail-stepbar li {
        float: left;
        text-align: center;
    }

    .flowstep .detail-stepbar .step-time {
        margin-top: 10px;
        color: #999;
    }

    .flowstep .detail-stepbar .step-time .step-time-min-wraper, .flowstep .detail-stepbar .step-time .step-time-wraper {
        width: 210px;
        margin: 0 auto;
        display: inline-block;
        zoom: 1;
    }

    .flowstep .detail-stepbar .step-cur .step-name {
        color: #009349;
    }

    .order-info {
        margin: 10px;
        padding: 5px 10px;
        border: 1px solid #e0e2e5;
        color: #336199;
        background-color: #edf3f4;
    }

    .order-info span {
        padding-right: 20px;
    }

    .flowstep .detail-stepbar .step-done .step-name, .flowstep .detail-stepbar .step-done .step-time {
        color: #009349;
    }

    .flowstep .step-done .step-no {
        font-size: 0px;
    }

    .packageInfo-box {
        border: 1px solid #CCC;
        display: inline-block;
        width: 100%;
        margin-top: 10px;
    }

    .packageInfo-box .table thead tr {
        color: #73879C;
    }

    .packageInfo-box .table thead:first-child tr {
        background: #FFF;
    }

    .packageDetail-box .table td {
        text-align: left;
        vertical-align: middle;
    }

    .drawerWarp .packagegreen > [class*="icon-"], .drawerWarp .package > [class*="icon-"] {
        display: none;
    }

    .packagegreen span {
        color: green;
    }

    .packagered i {
        display: block;
    }

    .packagered span {
        color: red;
    }
</style>

<div class="order-info">
    <span>订单号:AQ-73835</span>  <span>包裹总数: 1 </span><span>ERP状态:已付款</span>
</div>
<div class=" widget-container-span ui-sortable" style="margin:10px;">
    <div class="widget-box ">
        <div class="widget-header">

            <h5 class="package">
                <i class="icon-warning-sign red bigger-130" title="已下单"></i>
                <span>订单 (已下单) </span>
            </h5>
            <div class="widget-toolbar">
                <a href="#" data-action="collapse">
                    <i class="icon-chevron-up"></i>
                </a>
            </div>
        </div>
        <div class="widget-body">
            <div class="widget-body-inner" style="display:block;">
                <div class="widget-main">
                    <div id="Stepbar1" style="display: inline-block;">
                        <div data-control="Stepbar" class="flowstep">
                            <ol class="detail-stepbar flowstep-4">
                                <li class="step-first">
                                    <div class="step-done step-cur">
                                        <div class="step-name">已下单</div>
                                        <div class="step-no">1</div>
                                        <span></span>
                                        <div class="step-time">
                                            <div class="step-time-wraper">2019-04-02 01:41</div>
                                        </div>
                                    </div>
                                </li>
                                <li class="">
                                    <div class=" ">
                                        <div class="step-name">备货中</div>
                                        <div class="step-no">2</div>
                                        <span></span>
                                        <div class="step-time">
                                            <div class="step-time-wraper">(预)2019-04-16</div>
                                        </div>
                                    </div>
                                </li>
                                <li class="">
                                    <div class=" ">
                                        <div class="step-name">待发货</div>
                                        <div class="step-no">3</div>
                                        <span></span>
                                        <div class="step-time">
                                            <div class="step-time-wraper">(预)2019-04-17</div>
                                        </div>
                                    </div>
                                </li>
                                <li class="step-last">
                                    <div class=" ">
                                        <div class="step-name">已发货</div>
                                        <div class="step-no">4</div>
                                        <span></span>
                                        <div class="step-time">
                                            <div class="step-time-wraper">(预)2019-04-18</div>
                                        </div>
                                    </div>
                                </li>

                            </ol>
                        </div>
                    </div>

                    <table class="packageInfo-box">
                        <tr>
                            <td style=" border-right: 1px solid #CCC; padding:10px;" valign="top">
                                <div style="padding:5px 0px; font-size:18px; font-weight:bold;">包裹明细(数量:1)</div>
                                <div class="packageDetail-box">
                                    <table class="table table-striped table-bordered table-hover">
                                        <thead>
                                        <tr>
                                            <th>
                                                产品编号
                                            </th>
                                            <th>Sku编号</th>
                                            <th>数量</th>
                                            <th>图片</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr>
                                            <td>3205920 <br> 3C0FADD8D160</td>
                                            <td>4953595 <br> 香芋;xl; </td>
                                            <td>1 </td>
                                            <td>
                                                <a target="_blank" href="http://pms-hk.aopcdn.com/orgin/320/3205/32059/3205920_0496dd8499.gif"><img src="http://pms-hk.aopcdn.com/orgin/320/3205/32059/3205920_0496dd8499.gif?x-oss-process=image/resize,m_lfit,h_240,w_180" width="55"></a>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </td>
                            <td valign="top">
                                <div class="page-content" style="background-color:#fff;">
                                    <div class="row">
                                        <div class="col-xs-12">
                                            <div class="content">
                                                <div class="timeline-container timeline-style2">
                                                                    <span class="timeline-label">

                                                                            <b>2019-04-11</b>

                                                                    </span>
                                                    <div class="timeline-items">
                                                        <div class="timeline-item clearfix">
                                                            <div class="timeline-info">
                                                                <span class="timeline-date">22:38</span>
                                                                <i class="timeline-indicator btn btn-info no-hover"></i>
                                                            </div>
                                                            <div class="widget-box transparent">
                                                                <div class="widget-body">
                                                                    <div class="widget-main no-padding">
                                                                        供应商已发货
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="timeline-container timeline-style2">
                                                                    <span class="timeline-label">

                                                                            <b>2019-04-02</b>

                                                                    </span>
                                                    <div class="timeline-items">
                                                        <div class="timeline-item clearfix">
                                                            <div class="timeline-info">
                                                                <span class="timeline-date">09:37</span>
                                                                <i class="timeline-indicator btn btn-info no-hover"></i>
                                                            </div>
                                                            <div class="widget-box transparent">
                                                                <div class="widget-body">
                                                                    <div class="widget-main no-padding">
                                                                        系统已生成采购单<br>跟单人: 刘晨 &nbsp;&nbsp;&nbsp;供应商: 戈艺时装
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="timeline-item clearfix">
                                                            <div class="timeline-info">
                                                                <span class="timeline-date">01:41</span>
                                                                <i class="timeline-indicator btn btn-info no-hover"></i>
                                                            </div>
                                                            <div class="widget-box transparent">
                                                                <div class="widget-body">
                                                                    <div class="widget-main no-padding">
                                                                        客户提交了订单，等待系统审核
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="drawerFooter">
                                            <a class="btn btn-danger" href="javascript:void(0)" data-action="close"><i class="icon-remove"></i>关闭</a>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
